<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>循环点击</title>
</head>

<body>
    <ul class="nav">
        <li>榴莲</li>
        <li>臭豆腐</li>
        <li>鲱鱼罐头</li>
        <li>大猪蹄子</li>
    </ul>
</body>
<script>
    /* 闭包应用，点击li输出当前li的索引号 */
    // var lis = document.querySelector('.nav').querySelectorAll('li');
    // // 1.利用动态添加属性的方式
    // for (let i = 0; i < lis.length; i++) {
    //     lis[i].index = i;
    //     lis[i].onclick = function() {
    //         console.log(this.index);
    //     }
    // };
    // 利用闭包实现
    // 立即执行函数也称为小闭包，因为立即执行函数里面的任何一个函数都可以使用它的变量
    // for (let i = 0; i < lis.length; i++) {
    //     // 利用4个for循环创建了4个立即执行函数
    //     (function(i) {
    //         // console.log(i);
    //         lis[i].onclick = function() {
    //             console.log(i);
    //         }
    //     })(i)
    // };


    /* 闭包应用-循环中的setTimeout() */
    // var lis = document.querySelector('.nav').querySelectorAll('li');
    // 闭包在1秒钟之后打印li元素的所有内容
    // for (let i = 0; i < lis.length; i++) {
    //     (function(i) {
    //         setTimeout(() => {
    //             console.log(lis[i].innerHTML);
    //         }, 1000);
    //     })(i);
    // };
    // for (let i = 0; i < lis.length; i++) {
    //     (function(i) {
    //         console.log(lis[i].innerHTML);
    //     })(i);
    // }


    /* 闭包应用-计算打车价格 */
    // 打车起步价13(3公里内)，之后每多一公里加5块钱.用户输入公里数就可以计算打车价格
    // 如果有拥堵的情况，总价格多收取10块钱拥堵费
    // function fn() {
    //     var distance = prompt('请输入公里数');
    //     var price = 13;
    //     (function() {
    //         if (distance <= 3) {
    //             price = 13
    //         } else {
    //             price = 13 + (distance - 3) * 5
    //         }
    //         return price
    //     })()
    //     alert(price)
    // };
    // fn()


    // var car = (function() {
    //     var start = 13; //起步价
    //     var total = 0; //总价
    //     return {
    //         price: function(n) {
    //             if (n <= 3) {
    //                 total = start;
    //             } else {
    //                 total = start + (n - 3) * 5;
    //             }
    //             return total;
    //         },
    //         congestion: function(flag) {
    //             return flag ? total + 10 : total;
    //         }
    //     }
    // })();
    // console.log(car.price(1));
    // console.log(car.congestion(true));


    /* 思考 */
    // 输出结果是什么，有没有闭包产生
    // var name = "the window";
    // var obj = {
    //     name: "my obj",
    //     getNameFun: function() {
    //         return function() {
    //             console.log(this);
    //             return this.name
    //         }
    //     }
    // };
    // console.log(obj.getNameFun()());
    // 没有在局部作用域中定义变量，匿名函数的this指向window，输出the window；没有局部变量，不存在跨作用域访问，没有闭包产生

    // 输出结果，闭包产生？
    var name = "the window";
    var obj = {
        name: "my obj",
        getNameFun: function() {
            var that = this;
            return function() {
                console.log(that);
                return that.name
            }
        }
    };
    console.log(obj.getNameFun()());
    //定义了that变量，that=this指向obj,输出my obj;有局部变量并且存在跨作用域访问，所以有闭包的产生
</script>

</html>